<template>
  <n-scrollbar style="max-height: 80vh" class="box">
    <n-space vertical v-if="list.length > 0">
      <n-card hoverable class="card" v-for="item in list" :key="item.id">
        <n-badge
          dot
          size="small"
          class="!absolute right-1 top-1"
          v-show="!item.isRead"
        />
        <div class="flex items-center justify-between">
          <div class="text" v-if="item.type === 3">
            您的评论
            <span
              class="underline italic underline-offset-4"
              @click="openWindow('/forum/detail/' + item.updateId)"
              >{{ item.updateName }}</span
            >
            有了新回复
            <n-text
              class="cursor-pointer ml-2"
              type="primary"
              @click="click(item)"
            >
              {{ ' >>> 前往查看' }}
            </n-text>
          </div>
          <div class="text" v-else-if="item.type === 2">
            您的问题
            <span
              class="underline italic underline-offset-4"
              @click="openWindow('/forum/detail/' + item.updateId)"
              >{{ item.updateName }}</span
            >
            有了新回答
            <n-text
              class="cursor-pointer ml-2"
              type="primary"
              @click="click(item)"
            >
              {{ ' >>> 前往查看' }}
            </n-text>
          </div>
          <div class="text" v-else-if="item.type === 6">
            成果
            <span
              class="underline italic underline-offset-4"
              @click="openWindow('/research/detail/' + item.updateId)"
              >{{ item.updateName }}</span
            >
            有了新评论
            <n-text
              class="cursor-pointer ml-2"
              type="primary"
              @click="click(item)"
            >
              {{ ' >>> 前往查看' }}
            </n-text>
          </div>
          <div>
            <n-time :time="new Date(item.time)" type="relative"></n-time>
          </div>
        </div>
      </n-card>
    </n-space>
    <div class="blank" v-else>
      <img class="img" src="@assets/404.png" alt="" />
    </div>
  </n-scrollbar>
</template>

<script setup>
import api from '@/api/api'
const { Message } = api

const router = useRouter()
const list = ref([
  // {
  //   contactName: 'zy',
  //   questionTitle: 'qwe',
  //   questionUid: 1,
  //   time: '2020年1月2日',
  //   image: '1234',
  // },
])

const getReplyList = () => {
  Message.getNoticeList({ type: 'at' }).then((res) => {
    if (res.success) {
      list.value = res.list
    }
  })
}
const markAsRead = (id) => {
  list.value.find((item) => item.id === id).isRead = true
  Message.read({
    id
  }).then((res) => {
    if (res.success) {
      getReplyList()
    }
  })
}

onMounted(() => {
  getReplyList()
})

const click = function (item) {
  markAsRead(item.id)
  if (item.type === 6) {
    openWindow('/research/detail/' + item.updateId)
  } else window.open('/forum/detail/' + item.updateId + '#comment')
}
</script>

<style scoped lang="scss">
.box {
  text-align: right;
}
.card {
  position: relative;
  min-height: 60px;
}
.text {
  margin-right: 50px;
  font-weight: bold;
}
.image {
  position: absolute;
  right: 30px;
  transform: translate(0, -50%);
  top: 50%;
}
.blank {
  text-align: center;
  .img {
    display: block;
    height: 20vh;
    margin: 0 auto;
  }
}
</style>
